# 需求详情页 - TAPD需求文档

需求背景（补充业务场景与触发原因）：

客户在查看需求列表后，需要能够深入了解单个需求的详细信息。目前客户点击需求后无法查看需求的完整信息，包括处理进度、沟通记录、相关报价和协议等关键信息，导致客户需要频繁联系顾问询问需求进展、报价状态、协议签署情况等，沟通成本高。需要一个需求详情页面，让客户能够全面了解需求的完整信息，包括基本信息、处理进度、沟通记录、相关报价和协议，提升客户自主查询需求信息的效率，减少不必要的沟通成本。

需求价值（补充对业务的价值）：

1. **提升客户自主查询能力**：通过需求详情页面，客户可以自主查看需求的完整信息，包括处理进度、沟通记录、报价和协议等，减少对顾问的依赖，降低沟通成本。
2. **提升客户体验**：客户可以全面了解需求的最新状态和处理进展，包括每个处理阶段的时间、负责人、处理内容等，提升客户对服务的满意度和信任度。
3. **建立透明的处理流程**：通过处理进度时间线展示，让客户清晰了解需求从提交到完成的整个处理流程，建立透明的服务机制。
4. **支持沟通记录追溯**：通过沟通记录展示，客户可以回顾与顾问的沟通历史，避免重复沟通，提升沟通效率。
5. **支持报价和协议关联**：通过展示相关报价和协议，客户可以快速了解需求对应的报价情况和协议签署状态，支持后续的决策和操作。
6. **支持业务数据分析**：通过需求详情数据，可以分析需求处理时长、沟通频率、报价转化率等，支持业务决策。

需求目标（说明该需求要解决的问题或达成的目标）：

1. **提供需求详情展示**：作为客户查看单个需求详细信息的主要页面，全面展示需求的所有相关信息。
2. **展示处理进度**：以时间线形式展示需求的处理进度，包括每个处理阶段的状态、时间、负责人和处理内容，让客户清晰了解需求处理流程。
3. **展示沟通记录**：以聊天记录形式展示客户与顾问的沟通历史，包括发送时间、发送人、消息内容等，支持沟通记录追溯。
4. **展示相关报价**：展示与需求相关的报价信息，包括报价单号、报价金额、报价状态、报价时间等，支持跳转到报价详情页。
5. **展示相关协议**：展示与需求相关的协议信息，包括协议编号、协议状态、签署时间、协议摘要等，支持跳转到协议详情页。
6. **支持页面导航**：提供返回按钮和底部导航栏，支持客户在不同页面间跳转。

用户故事（不同的视角下，希望的结果）：

**作为客户，我希望：**
- 能够查看需求的完整信息，包括标题、状态、分类、优先级、描述、提交时间、更新时间等基本信息。
- 能够查看需求的处理进度，了解需求从提交到完成的每个处理阶段，包括阶段状态、处理时间、负责人和处理内容。
- 能够查看与顾问的沟通记录，回顾之前的沟通内容，避免重复沟通。
- 能够查看与需求相关的报价信息，了解报价金额、报价状态和报价时间，支持跳转到报价详情页查看详细报价。
- 能够查看与需求相关的协议信息，了解协议状态、签署时间和协议摘要，支持跳转到协议详情页查看详细协议。
- 能够通过返回按钮返回需求列表页，或通过底部导航栏跳转到其他页面。

**作为顾问，我希望：**
- 客户能够自主查看需求详情和处理进度，减少"我的需求现在什么状态"、"处理到哪一步了"这类基础咨询，让我有更多时间处理核心业务。
- 客户能够查看沟通记录，避免重复沟通相同的问题，提升沟通效率。
- 客户能够查看报价和协议信息，减少"报价出来了吗"、"协议签了吗"这类咨询，提升服务效率。

**作为产品经理，我希望：**
- 需求详情页面能够提升客户自主查询能力，降低对顾问的依赖，提升整体服务效率。
- 通过处理进度时间线展示，建立透明的服务机制，提升客户对服务的信任度。
- 通过沟通记录展示，提升沟通效率，避免重复沟通。
- 通过报价和协议关联展示，支持客户快速了解需求对应的报价和协议状态，支持后续的决策和操作。

需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

**1. 页面布局结构**
- 包含以下主要区域（从上到下）：
  - 顶部导航栏（固定顶部，包含返回按钮、标题、更多操作按钮）
  - 需求基本信息区域（白色卡片，包含标题、状态、分类、优先级、描述、时间信息）
  - 处理进度区域（白色卡片，包含时间线形式的处理进度）
  - 沟通记录区域（白色卡片，包含聊天记录形式的沟通历史）
  - 相关报价区域（白色卡片，包含报价信息卡片）
  - 相关协议区域（白色卡片，包含协议信息卡片）
  - 底部导航栏（固定底部，包含首页、需求、案例、我的四个Tab）

**2. 导航栏**
- 左侧显示返回按钮（箭头图标），点击后返回需求列表页
- 中间显示标题"需求详情"
- 右侧显示更多操作按钮（三个点图标），点击后显示操作菜单（如分享、删除等，可选功能）
- 导航栏固定在顶部，滚动时保持可见

**3. 需求基本信息展示**
- **需求标题**：显示在卡片顶部，字体较大，加粗显示，主色调（蓝紫色）
- **需求状态和分类**：显示在标题下方，横向排列
  - 状态标签：显示需求当前状态（如"处理中"），使用主色调背景
  - 分类标签：显示需求分类（如"功能开发"），使用灰色背景
- **时间信息**：显示在描述下方
  - 显示"提交于"时间：需求提交的时间
  - 显示"最后更新"时间：需求最后更新的时间
  - 格式：YYYY-MM-DD HH:mm

**4. 处理进度展示**
- **标题**：显示"处理进度"
- **时间线布局**：垂直排列，每个处理阶段一个时间线节点
- **时间线节点结构**：
  - 左侧：时间线指示器（圆点和连接线）
    - 已完成阶段：实心圆点，主色调
    - 当前阶段：实心圆点，主色调，带外圈高亮（表示当前进行中）
    - 未完成阶段：空心圆点或灰色圆点
    - 连接线：连接相邻节点，主色调
  - 右侧：阶段信息
    - 阶段名称：显示处理阶段名称（如"已提交"、"评估中"、"已报价"、"已签约"、"实施中"、"已完成"等）
    - 阶段时间：显示该阶段的时间，格式：YYYY-MM-DD HH:mm
    - 阶段描述：显示该阶段的处理内容或备注（如"顾问：李顾问"、"正在评估技术方案"、"正在设计优化方案"等）
- **排序规则**：按时间顺序从上到下排列（最早的在最上面）
- **数据来源**：从后端获取需求的处理进度数据，包括每个阶段的名称、时间、描述等

**5. 沟通记录展示**
- **标题**：显示"沟通记录"
- **聊天记录布局**：垂直排列，每条消息一个消息气泡
- **消息气泡结构**：
  - 左侧：头像（圆形，显示发送人姓名首字，不同角色使用不同颜色背景）
    - 顾问：主色调背景
    - 客户：绿色背景
  - 右侧：消息内容区域
    - 消息头部：显示发送人名称（如"顾问"、"我"）和时间（格式：YYYY-MM-DD HH:mm）
    - 消息内容：显示消息文本，不同角色使用不同背景色
      - 顾问消息：灰色背景
      - 客户消息：主色调浅色背景
- **排序规则**：按时间顺序从上到下排列（最早的在最上面）
- **数据来源**：从后端获取需求的沟通记录数据，包括每条消息的发送人、时间、内容等
- **分页加载**（可选）：如果沟通记录较多，支持分页加载或滚动加载更多

**6. 相关报价展示**
- **标题**：显示"相关报价"
- **报价卡片布局**：如果存在相关报价，显示报价信息卡片；如果不存在，显示"暂无报价"提示
- **报价卡片结构**：
  - 报价单号：显示报价单号（如"QT20240116001"）
  - 报价状态：显示报价状态标签（如"待确认"），使用不同颜色背景
    - 待确认：黄色背景
    - 已确认：绿色背景
    - 已拒绝：红色背景
  - 报价金额：显示报价金额，字体较大，加粗，主色调
  - 报价时间：显示报价时间，格式：YYYY-MM-DD HH:mm
  - 查看详情按钮：点击后跳转到报价详情页（customer-quotation-detail.html），传递报价ID参数
- **数据来源**：从后端获取与需求相关的报价数据，一个需求可能对应多个报价，当前展示最新的报价或待确认的报价

**7. 相关协议展示**
- **标题**：显示"相关协议"
- **协议卡片布局**：如果存在相关协议，显示协议信息卡片；如果不存在，显示"暂无协议"提示
- **协议卡片结构**：
  - 协议编号：显示协议编号（如"XY20240116001"）
  - 协议状态：显示协议状态标签（如"已生效"），使用不同颜色背景
    - 已生效：绿色背景
    - 待签署：黄色背景
    - 已失效：灰色背景
  - 签署时间：显示协议签署时间，格式：YYYY-MM-DD HH:mm
  - 协议摘要：显示协议摘要信息（如"本协议约定了双方的服务内容、权利义务及其他相关事项。"）
  - 查看详情按钮：点击后跳转到协议详情页（customer-agreement-detail.html），传递协议ID参数
- **数据来源**：从后端获取与需求相关的协议数据，一个需求可能对应多个协议，当前展示最新的协议或已生效的协议

**8. 底部导航栏**
- 固定在页面底部，包含四个Tab：
  - 首页：跳转到客户首页（customer-home.html）
  - 需求：跳转到需求列表页（customer-requirement-list.html），当前页面不在底部导航栏中，但需求Tab应保持选中状态（如果从需求列表页跳转过来）
  - 案例：跳转到案例列表页（当前为占位链接）
  - 我的：跳转到个人中心（customer-profile.html）
- 当前选中的Tab用主色调高亮显示图标和文字
- 点击Tab后跳转到对应页面

**9. 数据获取规则**
- **接口调用**：
  - 页面加载时，调用后端接口获取需求详情数据
  - 接口需要传递需求ID参数（从URL参数或路由参数获取）
  - 接口需要传递当前登录用户的ID或token（用于权限验证）
  - 接口返回需求详情数据，包括：
    - 基本信息：需求ID、标题、状态、分类、优先级、描述、提交时间、更新时间等
    - 处理进度：处理阶段列表，每个阶段包括名称、时间、描述等
    - 沟通记录：消息列表，每条消息包括发送人、时间、内容等
    - 相关报价：报价列表，每个报价包括报价ID、报价单号、报价金额、报价状态、报价时间等
    - 相关协议：协议列表，每个协议包括协议ID、协议编号、协议状态、签署时间、协议摘要等
- **数据更新**：
  - 页面支持下拉刷新（可选），刷新时重新获取最新数据
  - 或提供刷新按钮，点击后重新加载数据
  - 处理进度、沟通记录、报价、协议等数据可能会实时更新，需要支持实时刷新或定时刷新

**10. 页面跳转规则**
- **返回按钮**：点击导航栏左侧返回按钮，返回需求列表页（customer-requirement-list.html）
- **报价详情跳转**：点击相关报价区域的"查看详情"按钮，跳转到报价详情页（customer-quotation-detail.html），传递报价ID参数
- **协议详情跳转**：点击相关协议区域的"查看详情"按钮，跳转到协议详情页（customer-agreement-detail.html），传递协议ID参数
- **底部导航栏跳转**：点击底部导航栏Tab，跳转到对应页面

**11. 空状态处理**
- **无处理进度时**：显示"暂无处理进度"提示
- **无沟通记录时**：显示"暂无沟通记录"提示
- **无相关报价时**：显示"暂无报价"提示
- **无相关协议时**：显示"暂无协议"提示
- **需求不存在时**：显示"需求不存在"错误提示，支持返回列表页

**12. 加载状态处理**
- 数据加载时，显示加载动画或骨架屏
- 加载失败时，显示错误提示和重试按钮
- 各个区域（基本信息、处理进度、沟通记录、报价、协议）可以独立加载，互不影响

**13. 异常处理**
- 网络请求失败时，显示友好的错误提示，支持重试
- 数据格式错误时，显示错误提示，不影响页面基本显示
- 需求不存在或无权访问时，显示错误提示，支持返回列表页
- 跳转目标页面不存在时，显示错误提示

验收标准（列出明确、可验证的交付标准）：

**1. 页面布局验收**
- [ ] 导航栏固定在顶部，包含返回按钮、标题操作按钮
- [ ] 需求基本信息区域正确显示，包含标题、状态、分类、描述、时间信息
- [ ] 处理进度区域正确显示，包含时间线形式的处理进度
- [ ] 沟通记录区域正确显示，包含聊天记录形式的沟通历史
- [ ] 相关报价区域正确显示，包含报价信息卡片
- [ ] 相关协议区域正确显示，包含协议信息卡片
- [ ] 底部导航栏固定在底部，四个Tab正确显示

**2. 需求基本信息展示验收**
- [ ] 需求标题正确显示，字体加粗，主色调
- [ ] 需求状态和分类标签正确显示，颜色与状态和分类对应
- [ ] 需求描述完整显示，支持多行显示
- [ ] 时间信息正确显示，包括提交时间和最后更新时间，格式为YYYY-MM-DD HH:mm

**3. 处理进度展示验收**
- [ ] 时间线正确显示，包含所有处理阶段
- [ ] 已完成阶段的圆点正确显示，主色调
- [ ] 当前阶段的圆点正确显示，主色调，带外圈高亮
- [ ] 未完成阶段的圆点正确显示（空心或灰色）
- [ ] 连接线正确显示，连接相邻节点，主色调
- [ ] 阶段信息正确显示，包括阶段名称、阶段时间、阶段描述
- [ ] 阶段按时间顺序从上到下排列（最早的在最上面）

**4. 沟通记录展示验收**
- [ ] 沟通记录正确显示，包含所有消息
- [ ] 消息气泡正确显示，包括头像、发送人名称、时间、消息内容
- [ ] 顾问消息使用主色调背景头像，灰色背景消息内容
- [ ] 客户消息使用绿色背景头像，主色调浅色背景消息内容
- [ ] 消息按时间顺序从上到下排列（最早的在最上面）
- [ ] 时间格式正确，格式为YYYY-MM-DD HH:mm

**5. 相关报价展示验收**
- [ ] 存在报价时，报价卡片正确显示
- [ ] 报价单号正确显示
- [ ] 报价状态标签正确显示，颜色与状态对应
- [ ] 报价金额正确显示，字体较大，加粗，主色调
- [ ] 报价时间正确显示，格式为YYYY-MM-DD HH:mm
- [ ] 查看详情按钮正确显示，点击后正确跳转到报价详情页
- [ ] 无报价时，正确显示"暂无报价"提示

**6. 相关协议展示验收**
- [ ] 存在协议时，协议卡片正确显示
- [ ] 协议编号正确显示
- [ ] 协议状态标签正确显示，颜色与状态对应
- [ ] 签署时间正确显示，格式为YYYY-MM-DD HH:mm
- [ ] 协议摘要正确显示
- [ ] 查看详情按钮正确显示，点击后正确跳转到协议详情页
- [ ] 无协议时，正确显示"暂无协议"提示

**7. 交互功能验收**
- [ ] 点击导航栏返回按钮后，正确返回需求列表页
- [ ] 点击报价详情按钮后，正确跳转到报价详情页，传递报价ID参数
- [ ] 点击协议详情按钮后，正确跳转到协议详情页，传递协议ID参数
- [ ] 点击底部导航栏Tab后，正确跳转到对应页面
- [ ] 当前选中的Tab正确高亮显示（如果从需求列表页跳转过来，需求Tab应保持选中状态）
- [ ] 所有可点击元素都有点击反馈效果

**8. 数据获取验收**
- [ ] 页面加载时，正确调用后端接口获取需求详情数据
- [ ] 接口正确传递需求ID参数和用户身份信息
- [ ] 返回的数据正确解析和展示
- [ ] 数据加载时，正确显示加载状态
- [ ] 数据加载失败时，正确显示错误提示和重试按钮
- [ ] 各个区域可以独立加载，互不影响

**9. 空状态处理验收**
- [ ] 无处理进度时，正确显示"暂无处理进度"提示
- [ ] 无沟通记录时，正确显示"暂无沟通记录"提示
- [ ] 无相关报价时，正确显示"暂无报价"提示
- [ ] 无相关协议时，正确显示"暂无协议"提示
- [ ] 需求不存在时，正确显示"需求不存在"错误提示，支持返回列表页

**10. 异常处理验收**
- [ ] 网络请求失败时，正确显示错误提示，支持重试
- [ ] 数据格式错误时，正确显示错误提示
- [ ] 需求不存在或无权访问时，正确显示错误提示，支持返回列表页
- [ ] 跳转目标页面不存在时，正确显示错误提示

**11. 性能要求验收**
- [ ] 页面加载时间不超过2秒
- [ ] 页面滚动流畅，无卡顿现象
- [ ] 数据刷新响应及时，无明显延迟
- [ ] 支持大量沟通记录时，性能表现良好（可考虑分页或虚拟滚动）

**12. 数据准确性验收**
- [ ] 需求详情数据与数据库一致
- [ ] 处理进度数据与后端定义一致
- [ ] 沟通记录数据与后端定义一致
- [ ] 报价数据与后端定义一致
- [ ] 协议数据与后端定义一致
- [ ] 时间信息正确显示，时区处理正确